<template>
  <div class="max-box">
    <el-menu router class="nav-menu-container" default-active="/home/analyze" mode="horizontal">
      <el-menu-item index="/home/analyze" :disabled="analyzeDisabled">
        <template slot="title">
          <i class="el-icon-s-help"></i>
          <span>分析</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/home/opening"  :disabled="analyzeDisabled">
        <template slot="title">
          <i class="el-icon-reading"></i>
          <span>开局</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/home/game"  :disabled="analyzeDisabled">
        <template slot="title">
          <i class="el-icon-notebook-1"></i>
          <span>棋局</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/home/midGame" disabled>
        <template slot="title">
          <i class="el-icon-scissors"></i>
          <span>中残局</span>
        </template>
      </el-menu-item>
      <el-submenu index="2"  :disabled="analyzeDisabled">
        <template slot="title">
          <i class="el-icon-user-solid"></i>
          <span>用户数据</span>
        </template>
        <el-menu-item index="/home/user">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span>Lichess对局</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/home/exercise" :disabled="analyzeDisabled">
          <template slot="title">
            <i class="el-icon-coffee-cup"></i>
            <span>习题</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/home/chart" :disabled="analyzeDisabled">
          <template slot="title">
            <i class="el-icon-s-data"></i>
            <span>数据统计</span>
          </template>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="/home/edit" :disabled="analyzeDisabled">
        <template slot="title">
          <i class="el-icon-edit"></i>
          <span>棋盘编辑</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/home/database" :disabled="analyzeDisabled">
        <template slot="title">
          <i class="el-icon-video-camera-solid"></i>
          <span>局面库</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/home/setting" :disabled="analyzeDisabled">
        <template slot="title">
          <i class="el-icon-s-tools"></i>
          <span>设置</span>
        </template>
      </el-menu-item>
      <el-submenu index="3"  :disabled="analyzeDisabled">
        <template slot="title">
          <i class="el-icon-circle-plus-outline"></i>
          <span>其他</span>
        </template>
        <el-menu-item index="/home/version">
          <template slot="title">
            <i class="el-icon-coffee-cup"></i>
            <span>更新日志</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/home/readme">
          <template slot="title">
            <i class="el-icon-question"></i>
            <span>使用手册</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>

    <div>
      <keep-alive :exclude="keepAliveExclude">
        <router-view />
      </keep-alive>
    </div>

  </div>
</template>

<script>
  import emitvue from "@/lib/emitvue";
  import {bless, sleep} from "@/lib/utils";

  export default {
    name: "Home",
    data() {
      return {
        activeName: 'analyze',
        analyzeDisabled: false,
        keepAliveExclude: '',
      }
    },
    methods: {
    },
    async mounted() {
      // 分析模块全局处理菜单的禁用
      emitvue.$on('exitAnalyze', ()=>{
        this.analyzeDisabled = false
      })
      emitvue.$on('beginAnalyze', ()=>{
        this.analyzeDisabled = true
      })
      bless()
    }
  }
</script>


<style scoped>
  .max-box {
    width: 100%;
    box-sizing: border-box;
  }

  .nav-menu-container {
    width: 100%;
    position: sticky;
    top: 8px;
    z-index: 9;
  }

</style>